<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				padding:0;margin:0px;width:100%;
				text-align: center;
			}
			#myCanvas{
				display: inline-block;
				margin:25px auto;
				border:1px solid red; 
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas">您的浏览器不支持 HTML5 canvas 标签。</canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("myCanvas"); 
		canvas.width = 500;
   		canvas.height = 500;
		var gl=canvas.getContext("webgl") 
		
		//program

		//vertexShader ,fragmentShader

		let vertexShaderSrouce=`
			void main(){
				gl_Position=vec4(0.0,0.0,0.0,1.0);
				gl_PointSize=10.0;
			}
		`;
		let fragementShaderSource=`
			void main(){
				gl_FragColor=vec4(0.0,1.0,1.0,1.0);
			} 
		`;
		let vertexSahder=gl.createShader(gl.VERTEX_SHADER);
		let fragementShader=gl.createShader(gl.FRAGMENT_SHADER);

		//将shader渲染到指定的shader容器内
		gl.shaderSource(vertexSahder,vertexShaderSrouce);
		gl.shaderSource(fragementShader,fragementShaderSource);

		//编译
		gl.compileShader(vertexSahder);
		gl.compileShader(fragementShader);

		//运行程序
		let program=gl.createProgram();
		//指定应用程序加载指定的shader
		gl.attachShader(program,vertexSahder);
		gl.attachShader(program,fragementShader);

		//连接到那个应用程序
		gl.linkProgram(program);
		//使用哪个应用程序
		gl.useProgram(program); 


		//定义清空后的颜色值
		gl.clearColor(0.0,0.0,0.0,1.0);
		//清空画布
		gl.clear(gl.COLOR_BUFFER_BIT); 

		gl.drawArrays(gl.POINTS,0,1);
	</script>
</html>